<template>
  <div>
    <div class="XboxTop">
      <div class="XboxTop_title">离线航标管理</div>
    </div>
    <div class="XboxTop_con" style="padding: 1rem">
      <div style="width: 100%;height: 100%;" ref="ech"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  //变量
  data() { return { Echarts: null, } },
  //初始
  mounted() {
    let echartsL = echarts;
    this.$nextTick(() => {
      let echarts = echartsL.init(this.$refs.ech, "macarons");
      this.Echarts = echarts;
      this.getEach()
      window.addEventListener("resize", () => {
        //重置容器高宽
        echarts.resize();
      });
    });
  },
  //事件
  methods: {
    getEach() {
      var option = {
        grid: {
          left: "2%",
          right: "2%",
          // bottom: "10%",
          containLabel: true,
        },
        legend: {
          show: false,
          x: "center",
          y: "bottom",
          data: ["预定数量", "下单数量", "发货数量"],
          textStyle: {
            color: "#999",
          },
        },
        radar: {
          // shape: 'circle',
          radius: "80%",
          indicator: [
            { name: "灯质异常" },
            { name: "欠压" },
            { name: "过压" },
            { name: "终端故障" },
            { name: "通讯故障" },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            itemStyle: {
              borderRadius: 6,
              color: function (params) {
                //自定义颜色
                const colorList = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C"];
                return colorList[params.dataIndex];
              },
            },
            label: {
              fontSize: 40
            },
            data: [
              {
                value: [400, 400, 400, 400, 400, 400],
                name: "预定数量",
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: 'rgba(55, 109, 247, 0.5)',
                      offset: 0
                    },
                    {
                      color: 'rgba(55, 109, 247, 0.5)',
                      offset: 1
                    }
                  ])
                }
              },
            ],
          },
        ],
      };
      this.Echarts.setOption(option);
      setTimeout(() => {
        this.Echarts.resize();
      }, 100);
    }
  },
  //销毁
  beforeDestroy() { }
}
</script>
<style scoped></style>